<template>
  <div class="prodModal">
    <div class="mark"></div>
    <div class="content">
      <div
        data-v-6d8616f0=""
        data-v-7f13ab74=""
        class="item-container text-center bg-[#fff] border-r-0 border-[#eee] box-border"
        v-for="(item, index) in list"
        :key="index"
      >
        <div data-v-6d8616f0="" data-v-7f13ab74="">
          <div
            data-v-6d8616f0=""
            data-v-3c7db675=""
            data-v-7f13ab74=""
            class="text-black-85 w-full bg-white relative rounded overflow-hidden aspect-w-1 aspect-h-1 group border"
            style="border-color: rgba(0, 0, 0, 0.133)"
          >
            <div
              data-v-6d8616f0=""
              data-v-3c7db675=""
              class="border-t-[6px] text-rarities-2"
            >
              <div
                data-v-6d8616f0=""
                data-v-3c7db675=""
                class="p-2.5 text-xs absolute z-10 top-0 slot-item-name font-bold"
              >
                <div data-v-6d8616f0="">{{ item.goods_name }}</div>
              </div>
              <div
                data-v-6d8616f0=""
                data-v-3c7db675=""
                class="w-[90%] h-[50%] absolute z-auto top-[30%] left-[5%] bg-no-repeat bg-contain bg-center"
                :style="
                  'background-image: url(' +
                  item.good_images +
                  '); background-size: contain;'
                "
              ></div>
              <div
                data-v-6d8616f0=""
                data-v-3c7db675=""
                class="absolute -bottom-2 left-0 text-rarities-2"
              >
                <svg
                  data-v-6d8616f0=""
                  height="22"
                  viewBox="0 0 180 8"
                  fill="currentColor"
                  xmlns="http://www.w3.org/2000/svg"
                  data-v-3c7db675=""
                  style="width: 100%"
                >
                  <path
                    data-v-6d8616f0=""
                    opacity="0.2"
                    d="M180 0L90 5.33333V8H180V0Z"
                    data-v-3c7db675=""
                  ></path>
                  <path
                    data-v-6d8616f0=""
                    opacity="0.6"
                    d="M0 0L180 6V8H0V0Z"
                    data-v-3c7db675=""
                  ></path>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn">
      <button
        @click="$emit('close')"
        type="submit"
        class="rounded no-underline border flex items-center justify-center shadow text-black-85 border-transparent hover:bg-yellow-light active:shadow-yellow py-2 px-3 sm:px-4 text-xs sm:text-base bg-variants-primary w-full"
      >
        <div>
          <div class="flex items-center justify-center">
            <span>返回</span
            ><!---->
          </div>
        </div>
        <!---->
      </button>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.prodModal {
  .mark {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #00000050;
    z-index: 200;
  }
  .content {
    position: fixed;
    width: 100%;
    height: 250px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 202;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    & > div {
      margin-left: 20px;
      animation: rotate3d 2s;
      width: 16%;
      min-width: 160px;
      margin-bottom: 20px;
    }
  }
  .btn {
    position: fixed;
    // top: calc(50% + 250px);
    bottom:50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
  }
}

@keyframes rotate3d {
  0% {
    transform: rotate3d(0, 1, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 1, 0, 360deg);
  }
}
</style>
